<template>
  <div class='bookinfo'>
    <div class='thumb'>
      <img :src="info.image" class='back' mode='aspectFill'>
      <img :src='info.image' class='img' mode='aspectFit'>
      <div class='info'>
        <div class='title'>
          {{info.title}}
        </div>
        <div class='author'>
          {{info.author}}
        </div>
      </div>
    </div>
    <div class='detail'>
      <img :src='info.userimage' class='avatar' mode='aspectFit'>
      {{info.username}}
      <div class='right text-primary'>
        <Rate :value='info.rate'></Rate>
        {{info.rate}}分
      </div>
    </div>
    <div class='detail'>
      {{info.publisher}}
      <div class='right'>
        {{info.price}}
      </div>
    </div>
    <div class='tags'>
      <div class='badge' v-for='tag in info.tags' :key='tag'>{{tag}}</div>
    </div>
    <div class='summary'>
      <p v-for='(sum, index) in info.summary' :key="index">{{sum}}</p>
    </div>
  </div>
</template>
<script>
import Rate from '@/components/Rate.vue'
export default {
  props: ['info'],
  components: {
    Rate
  }
}
</script>
<style lang='scss'>
.bookinfo{
  .badge{
    display:inline-block;
    margin:5px;
    border-radius: 10px;
    border: 1px #ea5a49 solid;
    padding:2px 5px;
    color:#ea5a49;
  }
  .summary{
    margin-top: 10px;
    padding: 0 10px;
    p{
      text-indent: 2em;
      font-size: 14px;
      line-height:1.7;
      margin-bottom: 10px;
    }
  }
  font-size: 14px;
  .right{
    float:right;
  }
  .detail{
    padding: 5px 10px;
    .avatar{
      width:20px;
      height:20px;
      border-radius: 50%;
      vertical-align:middle;
    }
  }
  .thumb{
    width:750rpx;
    height: 500rpx;
    overflow:hidden;
    position:relative;
    .back{
      width: 100%;
      filter: blur(15px)
    }
    .img{
      position: absolute;
      height: 300rpx;
      top: 30rpx;
      left: 0;
      width:100%;
    }
    .info{
      color: white;
      position: absolute;
      width: 100%;
      left: 0;
      top: 350rpx;
      text-align:center;
      .title{
        font-size:20px;
      }
      .author{
        font-size:16px;
      }
    }
  }
}
</style>
